<template>
    <div class>
        <!--基本信息录入-->
        <div>
            <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="姓名" class="elformitemmargin">
                    <el-input v-model="form.name" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="性别" class="elformitemmargin">
                    <el-select v-model="form.sex" placeholder="请选择您的性别" class="inputwidth">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="出生日期">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.birth"
                            style="width: 350px;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="籍贯">
                    <el-input v-model="form.nation" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="民族">
                    <el-input v-model="form.folk" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="联系电话">
                    <el-input v-model="form.phone" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="电子邮件">
                    <el-input v-model="form.email" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="身高">
                    <el-input v-model="form.height" class="inputwidth" placeholder="单位cm"></el-input>
                </el-form-item>

                <el-form-item label="血型">
                    <el-select v-model="form.blood" placeholder="请选择您的血型" class="inputwidth">
                        <el-option label="A型" value="A型"></el-option>
                        <el-option label="B型" value="B型"></el-option>
                        <el-option label="AB型" value="AB型"></el-option>
                        <el-option label="O型" value="O型"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="身份证号">
                    <el-input v-model="form.idcard" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="部门">
                    <el-select v-model="form.deptid" placeholder="请选择您的所属部门" class="inputwidth">
                        <el-option
                            v-for="item in query.dept"
                            :key="item.deptid"
                            v-bind:label="item.deptname"
                            v-bind:value="item.deptid"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="岗位">
                    <el-select v-model="form.statid" placeholder="请选择您的所在岗位" class="inputwidth">
                        <el-option
                            v-for="item in query.stat"
                            :key="item.statid"
                            v-bind:label="item.statname"
                            v-bind:value="item.statid"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="入职日期">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.emptime"
                            style="width: 350px;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="工作日期">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.worktime"
                            style="width: 350px;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="用工形式">
                    <el-select v-model="form.form" placeholder="请选择您的工作性质" class="inputwidth">
                        <el-option label="正式员工" value="1"></el-option>
                        <el-option label="临时员工" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="人员来源">
                    <el-select v-model="form.source" placeholder="请选择您的工作来源" class="inputwidth">
                        <el-option label="校招" value="校招"></el-option>
                        <el-option label="社招" value="社招"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="政治面貌">
                    <el-select v-model="form.politics" placeholder="请选择您的政治面貌" class="inputwidth">
                        <el-option label="党员" value="党员"></el-option>
                        <el-option label="预备党员" value="预备党员"></el-option>
                        <el-option label="团员" value="团员"></el-option>
                        <el-option label="群众" value="群众"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="婚姻状况">
                    <el-select v-model="form.status" placeholder="请选择您的婚姻状况" class="inputwidth">
                        <el-option label="已婚" value="已婚"></el-option>
                        <el-option label="未婚" value="未婚"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="最高学历">
                    <el-select v-model="form.edu" placeholder="请选择您的最高学历" class="inputwidth">
                        <el-option label="高中及以下" value="高中及以下"></el-option>
                        <el-option label="大专" value="大专"></el-option>
                        <el-option label="本科" value="本科"></el-option>
                        <el-option label="研究生" value="研究生"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="毕业院校">
                    <el-input v-model="form.graschool" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="所学专业">
                    <el-input v-model="form.spec" class="inputwidth"></el-input>
                </el-form-item>

                <el-form-item label="毕业日期">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.gradate"
                            style="width: 350px;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>

                <br />

                <el-form-item style="margin-left:15px;">
                    <el-button type="primary" @click="onSubmit1">确定</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getDeptIdAndName } from '../../api/apis/deptment';
import { getStatIdAndName } from '../../api/apis/stat';
import { addEmp } from '../../api/apis/emp';
import { getEmpId } from '../../api/apis/emp';
import { addTry } from '../../api/apis/try';

export default {
    name: 'takeoffice',
    data() {
        return {
            activeName: 'first',
            query: {
                dept: [
                    // { deptid: 1, deptname: '人事部' },
                    // { deptid: 2, deptname: '技术部' },
                    // { deptid: 3, deptname: '培训部' }
                ],
                stat: [
                    // { statid: 1, statname: '管理' },
                    // { statid: 2, statname: '技术' },
                    // { statid: 3, statname: '营销' }
                ]
            },

            //基本信息录入表单
            form: {
                name: '灰太狼', //名字
                sex: 1, //性别，1男0女
                birth: '2020-01-01', //出生年月
                nation: '广东省', //籍贯
                folk: '汉族', //民族
                phone: '123', //电话
                email: '123@qq.com', //邮件
                height: '172', //身高
                blood: 'A型', //血型
                idcard: '123456', //身份证号
                deptid: 1, //部门id
                statid: 1, //岗位id
                emptime: '2020-01-02', //入职日期（雇佣日期）
                worktime: '2020-01-03', //工作日期
                form: 1, //用工形式，1正式，0临时
                source: '校招', //人员来源
                politics: '群众', //政治面貌
                status: '未婚', //婚姻状况
                edu: '本科', //最高学历
                graschool: '电子科技大学中山学院', //毕业院校
                spec: '软件工程', //专业
                gradate: '2020-01-04' //毕业日期
            }
        };
    },
    created() {
        this.fetchdept(); //获取部门相关信息
        this.fetchstat(); //获取岗位相关信息
    },
    methods: {
        //获取部门相关信息
        fetchdept() {
            getDeptIdAndName()
                .then((res) => {
                    console.log(res);
                    if (res.state === 200) {
                        this.query.dept = res.list;
                    } else {
                        this.$message.error('部门下拉列表数据获取失败，' + res.msg);
                    }
                })
                .catch(() => {
                    this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                });
        },

        //获取岗位相关信息
        fetchstat() {
            getStatIdAndName()
                .then((res) => {
                    console.log(res);
                    if (res.state === 200) {
                        this.query.stat = res.list;
                    } else {
                        this.$message.error('岗位下拉列表数据获取失败，' + res.msg);
                    }
                })
                .catch(() => {
                    this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                });
        },

        //基本信息录入
        onSubmit1() {
            console.log(this.form);
            addEmp(this.form)
                .then((res) => {
                    console.log(res)
                    if (res.state === 200) {
                        this.$message.success('数据录入成功');
                    } else {
                        this.$message.error('数据录入失败,' + res.msg);
                    }
                })
                .catch(() => {
                    this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                });
        }
    },
    computed: {}
};
</script>

<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
.inputwidth {
    width: 350px;
}

.el-form-item label:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.el-form-item__label {
    text-align: justify;
    height: 20px;
    margin-left: 15px;
}

.el-form-item.is-required .el-form-item__label:before {
    content: none !important;
}
</style>

